<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- padding-left: 10px; 
         padding-right: 10px; 
         padding-top: 10px; 
         padding-bottom: 10px;
    
  合写为：padding:10px;

         padding-left: 20px; 
         padding-right: 20px;
         padding-top: 10px; 
         padding-bottom: 10px;
  合写为：padding:10px 20px;

       padding-left: 20px;
       padding-right: 20px;
       padding-top: 10px; 
       padding-bottom: 30px;
 合写为:padding:10px 20px 30px;

         padding-left: 40px; 
         padding-right: 20px; 
         padding-top: 10px; 
         padding-bottom: 30px;
 合写为：padding:10px 20px 30px 40px;
    -->
    <!-- <div style="width:80px; height:80px; background: red; padding-left: 40px; padding-right: 20px; padding-top: 10px; padding-bottom: 30px;">123你好12你23好</div> -->

    <!-- border:5px solid #000; 
    可以分写为：border-left:5px solid #000;
               border-right:5px solid #000;
               border-top:5px solid #000;
               border-bottom:5px solid #000;

       或者：  border-color:#000;
              border-width:5px;
              border-style:solid;


              solid实线 dashed虚线（矩形组成） dotted虚线（圆点组成）
-->
    <!-- <div style="width: 90px; height:90px; background:red; border:5px solid #000; border-top-width: 2px;border-left-color:green; border-bottom: 10px dashed blue; border-right-style: dotted;  width:30px;"></div> -->

    <!-- <div style="width: 190px; height:190px; background:red; padding: 10px 0 0 10px;">
        <div style="width: 100px; height:100px; background:green;"></div>
    </div> -->

    <!-- 盒子塌陷：给子级元素加的上边外边距应用到了父级元素上

        解决方法：1、给父级元素加边框
                 2、给父级元素加overflow: hidden;（溢出隐藏）
                 3、把子级元素的外边距换成父级元素的内边距
    
    -->

<!-- 行内元素居中到父级元素内：text-align:center;
     块状元素居中到父级元素中：margin:0 auto;

-->

    <div style="width: 200px; height:200px; background:red; overflow: hidden;">
        <div style="width: 100px; height:100px; background:green; margin-left: 10px; margin-top: 30px;"></div>
    </div>

    <!-- <div style="width:50px ; height:50px; overflow: hidden;"> -->
        <!-- <img src="img/01.jpg" alt=""> -->
        <!-- 给父级元素加overflow: hidden;（溢出隐藏
        给父级元素加overflow: hidden;（溢出隐藏 -->
    <!-- </div> -->

    <div style="width: 200px; height:200px; background:red; margin: 0 auto;">
    <div style="width: 100px; height:100px; background:green; margin: 0 auto;"></div>
    </div>
</body>

</html>